<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery-2.0.3.min.js" ></script>
		<script type="text/javascript" src="js/three.js" ></script>
		<script type="text/javascript" src="js/Stats.js" ></script>
		<script type="text/javascript" src="js/dat.gui.js" ></script>
		<title>创建几何图形</title>
		<style>
			body{
				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body >
		<div id="Stats-output" ></div>
		<div id="WebGL-output">
	</body>
	<script>
		$(function(){
					//直接开启帧数检测
				var stats = initStats();
				//编辑代码处
				var scene = new THREE.Scene();//场景构建
				var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);//相机构建
				var renderer = new THREE.WebGLRenderer();//渲染器构建
				renderer.setClearColor(0x5CACEE);
				renderer.setSize(window.innerWidth,window.innerHeight);
				renderer.shadowMapEnabled = true;//激活阴影
				//构建一个坐标轴
				var axes = new THREE.AxisHelper(20);
				scene.add(axes);
				var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
				var planeMaterial = new THREE.MeshBasicMaterial({color: 0x808080});
				//var planeMaterial = new THREE.MeshLambertMaterial({color:0x808080});//转换对光源有渲染的材质
				var plane = new THREE.Mesh(planeGeometry,planeMaterial);
				plane.rotation.x = -0.5*Math.PI;
				plane.position.x = 15;
				plane.position.y = 0;
				plane.position.x = 0;
				scene.add(plane);
				plane.receiveShadow  = true;
				//渲染视图视角
				camera.position.x = -30;
				camera.position.y = 40;
				camera.position.z = 30;
				camera.lookAt(scene.position)
				$("#WebGL-output").append(renderer.domElement);
				
		        // call the render function
		        var step = 0;

				//创建光源
		        var ambientLight = new THREE.AmbientLight(0x0c0c0c);
		        scene.add(ambientLight);
		
		        // add spotlight for the shadows
		        var spotLight = new THREE.SpotLight(0xffffff);
		        spotLight.position.set(-40, 60, -10);
		        spotLight.castShadow = true;
		        scene.add(spotLight);
				


        var controls = new function () {
            this.rotationSpeed = 0.02;
            this.numberOfObjects = scene.children.length;

            this.removeCube = function () {
                var allChildren = scene.children;
                var lastObject = allChildren[allChildren.length - 1];
                if (lastObject instanceof THREE.Mesh) {
                    scene.remove(lastObject);
                    this.numberOfObjects = scene.children.length;
                }
            };

            this.addCube = function () {

                var cubeSize = Math.ceil((Math.random() * 3));
                var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
                var cubeMaterial = new THREE.MeshLambertMaterial({color: Math.random() * 0xffffff});
                var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
                cube.castShadow = true;
                cube.name = "cube-" + scene.children.length;
                // position the cube randomly in the scene

                cube.position.x = -30 + Math.round((Math.random() * planeGeometry.parameters.width));
                cube.position.y = Math.round((Math.random() * 5));
                cube.position.z = -20 + Math.round((Math.random() * planeGeometry.parameters.height));

                // add the cube to the scene
                scene.add(cube);
                this.numberOfObjects = scene.children.length;
            };

			
            this.outputObjects = function () {
                console.log(scene.children);
            }
        };
				  var gui = new dat.GUI();
		       
		        gui.add(controls, 'addCube');
		        gui.add(controls, 'removeCube');
		        render();
				function render(){
				 stats.update();
			
				
            // rotate the cubes around its axes
            scene.traverse(function (e) {
                if (e instanceof THREE.Mesh && e != plane) {
 
                    e.rotation.x += controls.rotationSpeed;
                    e.rotation.y += controls.rotationSpeed;
                    e.rotation.z += controls.rotationSpeed;
                }
        	    });

		            // render using requestAnimationFrame
		            requestAnimationFrame(render);
		            renderer.render(scene, camera);
				}
				
				//初始化帧数状态
				function initStats(){
					var stats = new Stats();
					stats.setMode(0);
					stats.domElement.style.position = "absolute";
					stats.domElement.style.left = "0px";
					stats.domElement.style.top  = "0px";
					$("#Stats-output").append(stats.domElement);
					return stats;
				}
				
				
		})
		
	</script>
	
	
</html>
